<template>
  <div>
    <div ref="table" style="position: absolute; width: 600px;height:400px;"></div>
  </div>
</template>

<script>
import * as VTable from '@visactor/vtable';
import { ColumnSeriesPlugin, RowSeriesPlugin } from '@visactor/vtable-plugins';
export default {
  name: '',
  props: [],
  components: {},
  data() {
    return {
     tableInstance: null,
    };
  },
  created() {},
  mounted() {
    this.createTable()
  },
  methods: {
    createTable(){
      // 创建 ColumnSeries 插件实例
      const columnSeries = new ColumnSeriesPlugin({
        columnCount: 100,  // 设置列数量
        // 自定义字段名生成
        generateColumnField: (index) => `field_${index}`
      });

      const rowSeries = new RowSeriesPlugin({
        rowCount: 100,  // 设置行数量
        // 自定义行数据生成
        fillRowRecord: (index) => ([])
      });

      // 在 VTable 选项中使用插件
      const option = {
        container: this.$refs.table,
        records: [],
        plugins: [columnSeries, rowSeries],
        // 其他 VTable 配置...
      };
      this.tableInstance = new VTable.ListTable(option);
    }
  },
  watch: {},
  computed: {},
};
</script>

<style lang="scss" scoped>
</style>
